﻿<MGridstack Items="@items"
            ItemKey="i => i.Key"
            ItemPosition="@(_ => new (12,3))"
            Class="grey lighten-5"
            ItemClass="white"
            MinRow="2"
            DisableOneColumnMode
            OnResize="OnResize">
    <ItemContent>
        @if (context.Type == "bar")
        {
            <div class="position-relative fill-height">
                <MECharts Option="@context.Option"
                          @ref="@chartsMap[context.Key]">
                </MECharts>
                <MButton OnClick="() => Remove(context)" Icon
                         Style="position: absolute;right: 0;top: 0;">
                    <MIcon>mdi-close</MIcon>
                </MButton>
            </div>
        }
        else if (context.Type == "line")
        {
            <div class="position-relative fill-height">
                <MECharts Option="@context.Option"
                          @ref="@chartsMap[context.Key]">
                </MECharts>
                <MButton OnClick="() => Remove(context)" Icon
                         Style="position: absolute;right: 0;top: 0;">
                    <MIcon>mdi-close</MIcon>
                </MButton>
            </div>
        }
        else if (context.Type == "pie")
        {
            <div class="position-relative fill-height">
                <MECharts Option="@context.Option"
                          @ref="@chartsMap[context.Key]">
                </MECharts>
                <MButton OnClick="() => Remove(context)" Icon
                         Style="position: absolute;right: 0;top: 0;">
                    <MIcon>mdi-close</MIcon>
                </MButton>
            </div>
        }
        else
        {
            <div>Type @context.Type not exists.</div>
        }
    </ItemContent>
</MGridstack>

<div class="d-flex justify-space-around mt-1">
    <MButton OnClick='() => Add("bar")'>Add bar</MButton>
    <MButton OnClick='() => Add("line")'>Add line</MButton>
    <MButton OnClick='() => Add("pie")'>Add pie</MButton>
</div>

@code {

    List<Item> items = new();
    Dictionary<string, MECharts> chartsMap = new();
    int idSuffix;

    record Item(string Key, string Type, object Option);

    void Add(string type)
    {
        idSuffix++;
        var key = type + idSuffix;
        var option = GenOption(type);
        items.Add(new Item(key, type, option));
        chartsMap.Add(key, new MECharts());
    }

    void Remove(Item item)
    {
        items.Remove(item);
        chartsMap.Remove(item.Key);
    }

    async Task OnResize(GridstackResizeEventArgs args)
    {
        if (chartsMap.TryGetValue(args.Id, out var charts))
        {
            await charts.Resize(args.Width, args.Height);
        }
    }

    static int[] Random()
    {
        var random = new Random();
        return Enumerable.Range(0, 7).Select(_ => random.Next(100, 999)).ToArray();
    }

    static readonly string[] Category = { "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" };

    static object GenOption(string type)
    {
        if (type == "pie")
        {
            return new
            {
                tooltip = new { },
                legend = new { },
                series = new[]
                {
                    new
                    {
                        name = "Access From",
                        type,
                        radius = "50%",
                        data = Random().Select((value, index) => new
                        {
                            value,
                            name = Category[index]
                        }).ToArray()
                    }
                }
            };
        }

        return new
        {
            tooltip = new { },
            xAxis = new
            {
                type = "category",
                data = Category
            },
            yAxis = new
            {
                type = "value"
            },
            series = new[]
            {
                new
                {
                    data = Random(),
                    type
                }
            }
        };
    }

}
